<template>
  <view :class="isBlock ? 'BaseHouseMessage_Block':'BaseHouseMessage_inlineBlock'" v-if="content">
    <view class="BaseHouseMessageItem">
      <view class="BaseHouseMessageItemFlex">
          <view class="left" :style="title.length == 2 ? 'min-width: 60rpx;':''">{{ title }}</view>
          <view class="right">{{ nosubstr ? content.length > 16 ? content.substr(0, 16) + '...' : content : content }}<slot name='contentRight'></slot></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
    props: {
        title: {
            type: String
        },
        content: {
            type: String
        },
        isBlock: {
            type: Boolean,
            default: false
        },
        //nosubstr
        nosubstr: {
          type: Boolean,
          default: true
        }
    }
};
</script>

<style scoped lang="less">
.BaseHouseMessage_Block{
    display: block;
    width: 100%;
}
.BaseHouseMessage_inlineBlock{
    width: 50%;
    display: inline-block;
    // border: 1px solid red;
}
.BaseHouseMessageItem {
  width: 100%;
  .BaseHouseMessageItemFlex {
    // display: flex;
    display: block;
    position: relative;
    .left {
      min-width: 90rpx;
      font-family: MicrosoftYaHei;
      font-size: 24rpx;
      font-weight: normal;
      font-stretch: normal;
      line-height: 50rpx;
      letter-spacing: 0rpx;
      color: #999999;
      display: inline-block;

      text-align-last: justify;
      position: relative;
    }
    .left::after{
      content: ":";
      position: absolute;
      line-height: 50rpx;
      top: 0;
      right: -8rpx;
      font-size: 24rpx;
      color: #999999;
    }
    .right {
      display: inline-block;

      font-family: MicrosoftYaHei;
      font-size: 24rpx; 
      font-weight: bold;
      font-stretch: normal;
      line-height: 50rpx;
      letter-spacing: 0rpx;
      color: #333333;
      padding-left: 20rpx;
      box-sizing: border-box;
      // position: relative;
      // width: calc
      // border: 1px solid red;
    }
  }
}
</style>